<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>margin的重叠问题</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.ball {
				width: 300px;
				height: 300px;
				background-color: yellow;
				/*border-top: 1px solid black;*/

				/*
					子级元素的margin-top会传递给父级元素,
					通过给父级添加border-top或者用overflow: hidden;可以解决该问题
				*/
				overflow: hidden;
			}

			.in {
				width: 100px;
				height: 100px;
				background-color: red;
				margin-left: 50px;
				margin-top: 50px;	
			}

			.red {
				width: 200px;
				height: 200px;
				background-color: red;
				margin-bottom: 100px;
			}

			.blue {
				width: 400px;
				height: 150px;
				background: blue;
				/* 相邻的上下margin会重叠 */
				margin-top: 250px;
			}

			.blue>a {
				background-color: yellow;
			}

			.blue>.left {
				/* 左右margin不会重叠 */
				margin-right: 100px;
			}

			.blue>.right {
				margin-left: 100px;
			}

			.p {
				width: 300px;
				background-color: red;
				border: 2px solid black;
			}

			.p>.c {
				margin-top: 50px;
				margin-bottom: 20px;
				height: 5px;
			}


		</style>
	</head>
	<body>

		<div class="ball">
			<div class="in"></div>
		</div>


		<div class="red"></div>

		<div class="blue">
			<a href="" class="left">我是a标签1</a>
			<a href="" class="right">我是a标签2</a>
		</div>

		<div class="p">
			<div class="c"></div>
		</div>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		
	</body>
</html>